<template>
	<view class="center">
		<view class="logo" @click="goLogin" >
			<image class="logo-img" :src="login ? uerInfo.avatarUrl :avatarUrl"></image>
			<view class="logo-title">
				<text class="uer-name">{{token ? uerInfo : '请您先登录'}}</text>
				<text class="icon iconfont icon-jiantou" style="color: #fff;" v-if="!token"></text>
			</view>
		</view>
		<view class="center-list">
			<view @tap="toUserInfo" class="center-list-item border-bottom">
				<image src="../../static/user/gerenxinxi.png"></image>
				<text class="list-text">个人信息</text>
				<text class="icon iconfont icon-jiantou iconStyle"></text>
			</view>
			<view @tap="toChange" class="center-list-item border-bottom">
				<image src="../../static/user/xiugaimima.png"></image>
				<text class="list-text">修改密码</text>
				<text class="icon iconfont icon-jiantou iconStyle"></text>
			</view>
			<view @tap="toMyLand" class="center-list-item border-bottom">
				<image src="../../static/user/wodetudi.png"></image>
				<text class="list-text">我的土地</text>
				<text class="icon iconfont icon-jiantou iconStyle"></text>
			</view>
			<view class="center-list-item">
				<image src="../../static/user/Collection.png"></image>
				<text class="list-text">我的收藏</text>
				<text class="icon iconfont icon-jiantou iconStyle"></text>
			</view>
		</view>
		<!-- <view class="center-list">
			<view @tap="toHelp" class="center-list-item border-bottom">
				<image src="../../static/user/Help.png"></image>
				<text class="list-text">帮助中心</text>
				<text class="icon iconfont icon-jiantou iconStyle"></text>
			</view>
		</view> -->
		<view class="center-list">
		<!-- 	<view class="center-list-item border-bottom">
				<text class="icon iconfont iconImg">&#xe644;</text>
				<text class="list-text">账号绑定</text>
				<text class="icon iconfont icon-jiantou iconStyle"></text>
			</view>
			<view class="center-list-item border-bottom">
				<text class="icon iconfont iconImg">&#xe644;</text>
				<text class="list-text">关于应用</text>
				<text class="icon iconfont icon-jiantou iconStyle"></text>
			</view> -->
			<view @tap="out" v-if="token" class="center-list-item">
				<image src="../../static/user/Logout.png"></image>
				<text class="list-text">注销登陆</text>
				<text class="icon iconfont icon-jiantou iconStyle"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				login:false,
				token: false,
				avatarUrl: "../../static/uni-center/logo.png",
				uerInfo: ""
			}
		},
		onLoad() {
			uni.$on('update',(data)=>{
			       this.token = this.User.token
			       this.uerInfo=this.User.userAccount
			    })
			this.token = this.User.token
			this.uerInfo=this.User.userAccount
		},
		methods: {
			//退出登录
			out(){
				uni.showModal({
					title:"提示",
					content:"你确定要注销登陆吗？",
					success: (res) => {
						if(res.confirm){
							uni.removeStorageSync('token');
							uni.removeStorageSync('userAccount');
							this.User.token = false;
							this.User.userAccount = false;
							this.token = false;
						}
					}
				})
			},
			//帮助中心
			toHelp(){
				uni.navigateTo({
					url:"./help/help",
				})
			},
			//我的土地
			toMyLand(){
				uni.navigateTo({
					url:"userLand/userLand"
				})
			},
			//个人信息
			toUserInfo(){
				uni.navigateTo({
					url:"userInfo/userInfo"
				})
			},
			//修改密码
			toChange(){
				uni.navigateTo({
					url:"./change"
				})
			},
			//前往登陆
			goLogin() {
				if (!this.token) {
					uni.navigateTo({
						url:"./login/login"
					})
				}
			}
		}
	}
</script>

<style lang="less">
	@import  "../../common/global.less";
	page,
	view {
		display: flex;
	}
	.iconStyle{
		color:#bababa;
	}
	.iconImg{
		color:#34AB68;
		font-size: 40rpx;
	}
	page {
		background-color: @backcolorthree;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx;
		box-sizing: border-box;
		background-color: #34AB68;
		flex-direction: row;
		align-items: center;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		margin-left: 20rpx;
		width: 130upx;
		height: 130upx;
		border-radius: 130upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size:@titleSize;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
		flex-direction: column;
	}

	.center-list-item {
		height: 100upx;
		width: 750upx;
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		display: flex;
		padding: 0upx 20upx;
		>image{
			height: 50rpx;
			width: 50rpx;
			padding-right: 10rpx;
			padding-left: 10rpx;
		}
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #f0eff3;
		border-bottom-style: solid;
	}

	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #4cd964;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 32upx;
		color: #555;
		flex: 1;
		text-align: left;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}
</style>